<template>
  <div>
    <el-dialog
      :before-close="closed"
      :close-on-click-modal="false"
      width="780px"
      title="节目组明细"
      :visible.sync="innerVisible"
      append-to-body>
      <el-row :gutter="10">
        <el-col>
          <!-- 列表区域 -->
          <div style="position: relative;">
            <el-row class="titleF">
              <el-col :span="8" style="padding-left: 10px;">
                <b>名称:</b> <span>{{scopeRow.pgm_name}}</span>
              </el-col>
              <el-col :span="8" style="padding-left: 10px;text-align: right;">
                <b>实际总长:</b> <span><time-picker inputType="readonly" v-model="scopeRow.pgm_len" style="display: inline-block;" /></span>
              </el-col>
              <el-col :span="8"  style="padding-left: 10px;text-align: right;">
                <b>播出: </b> <span><time-picker inputType="readonly" v-model="scopeRow.s_time" style="display: inline-block;" /></span>
              </el-col>
            </el-row>
            <el-table
              height="50vh"
              ref="mattable"
              highlight-current-row
              @current-change="rowsCurrentChange"
              v-loading="loading"
              lazy
              :data="listsData"
              border
              stripe
              style="width: 100%;margin-left: 10px;">
              <el-table-column type="index" width="55" />
              <el-table-column prop="mat_id" label="序号" width="80px" sortable="custom"></el-table-column>
              <el-table-column show-overflow-tooltip label="播出时间" width="220" sortable="custom">
                <template v-slot="scope">
                  <time-picker inputType="readonly" v-model="scope.row.s_time" />
                </template>
              </el-table-column>
              <el-table-column prop="adv_seg_name" label="节目名称" sortable="custom" show-overflow-tooltip></el-table-column>
              <el-table-column label="节目长度" width="120" sortable="custom">
                <template v-slot="scope">
                  <time-picker inputType="readonly" v-model="scope.row.pgm_len" />
                </template>
              </el-table-column>
              <el-table-column prop="mat_id" label="素材ID" width="120" sortable="custom"></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { lists } from '@/api/advpgmlist/advgroup.js' // 频道列表接口
export default {
  name: 'matdialog',
  watch: {
    innerVisible(newV) {
      if (newV) {
        this.$nextTick(() => {
          this.listsSearch()
          // this.$refs.dialogtreeone.$el.firstChild.firstChild.click()
        }, 50)
      }
    },
    'listsData' () {
      this.$nextTick(() => { // 再拖动结束视图更新后，立即对列表序号进行重新排序。
        if (this.listsData instanceof Array) {
          this.listsData.map((item, index) => {
          // 列表重新计算播出时间
            if (index !== 0) {
              this.$set(item, 's_time', this.listsData[index - 1].s_time + this.listsData[index - 1].pgm_len)
            } else {
              this.$set(item, 's_time', this.scopeRow.s_time)
            }
          })
        }
      })
    }
  },
  data() {
    return {
      rowscurrent: null,
      queryInfo: {},
      loading: false,
      listsData: []
    }
  },
  props: {
    innerVisible: {
      type: Boolean,
      default: false
    },
    scopeRow: {
      type: Object,
      default: null
    }
  },
  created() {},
  mounted() {},
  methods: {
    closed() {
      this.$emit('update:innerVisible', false)
    },
    rowsCurrentChange(rows) {
      this.rowscurrent = rows
      console.log(rows)
    },
    listsSearch() {
      this.queryInfo.type = this.scopeRow.adv_pl_id
      this.queryInfo.advseq = this.scopeRow.pgm_id
      this.getgrpDetail()
    },
    getgrpDetail() {
      lists(this.queryInfo).then(res => {
        this.loading = false
        if (res.status !== 200) return
        this.listsData = res.data.data.list
      })
    }
  }
}
</script>

<style>
.titleF span {
  padding-left: 7px;
}
</style>
